<template>
	<view>
		<view class="top_ts">
			<view class="flex_b">
				<image src="../static/icon/ts.png" mode=""></image>
				<view class="">
					下单后10分钟内且距离截止取餐时间5小时以上可以申请退款
				</view>
			</view>
		</view>
		<view class="top">
			<view class="juan">
				<view class="">
					退款原因
				</view>
				<view class="flex_b" @click="openPop">
					<view class="" :style="{
						color:params.refundReason?'#000':''
					}">
						{{params.refundReason?params.refundReason:'去选择'}}
					</view>
					<uni-icons type="right" size="16"></uni-icons>
				</view>
			</view>
			<view class="juan">
				<view class="">
					退款金额
				</view>
				<view class="DINB">
					<span class="ic">￥</span>{{orderinfo.payAmount}}
				</view>
			</view>
			<view class="juan">
				退款说明（选填）
			</view>
			<view class="textarea">
				<textarea v-model="params.refundDescribe" placeholder="请输入" cols="30" rows="10"></textarea>
			</view>
		</view>


		<view class="content">
			<view class="iconflex">
				<view class="left">
					<image src="/static/dp.png" mode=""></image>
					{{orderinfo.shopName}}-{{orderinfo.productName}}
				</view>
				<view class="right">
					<image src="/static/icon/dh.png" mode="" @click="$opennavigation(shopinfo)"></image>
					<image src="/static/icon/sj.png" mode="" @click="$phoneCall(shopinfo.shopPhone)"></image>
				</view>
			</view>


			<view class="" v-if="isexpand">
				<view class="its">
					<view class="its_l">商品种类</view>
					<view class="its_l">{{orderinfo.productCategory}}</view>
				</view>
				<view class="its">
					<view class="its_l">商品数量</view>
					<view class="its_l">{{orderinfo.productCount}}</view>
				</view>
				<view class="its">
					<view class="its_l">商品价格</view>
					<view class="price1"><span
							class="S1">￥{{orderinfo.productPriceOldBegin}}-{{orderinfo.productPriceOldEnd}}</span>
						￥{{orderinfo.productPrice}}</view>
				</view>
				<view class="border">
					<view class="its">
						<view class="its_l">消费券</view>
						<view class="price2">
							<span v-if="orderinfo.couponReceiveId">-￥{{orderinfo.couponAmount}}</span>
							<span v-else>无</span>
						</view>
					</view>
					<view class="its">
						<view class="its_l">合计</view>
						<view class="price3"><span>￥</span>{{orderinfo.payAmount}}</view>
					</view>
				</view>
				<view class="its">
					<view class="its_l">订单编号</view>
					<view class="its_l flex_b">{{orderinfo.orderNumber}}<span class="btn" @click="copy">复制</span></view>
				</view>
				<view class="its">
					<view class="its_l">支付方式</view>
					<view class="its_l">{{orderinfo.payType}}</view>
				</view>
				<view class="its">
					<view class="its_l">下单时间</view>
					<view class="its_l">{{orderinfo.createTime}}</view>
				</view>
				<view class="its">
					<view class="its_l">支付时间</view>
					<view class="its_l">{{orderinfo.payTime}}</view>
				</view>
			</view>
			<view class="check">
				<view class="" v-if="isexpand" @click="isexpand=!isexpand">
					收起 <uni-icons color="#D1CDCD" size="16" type="top"></uni-icons>
				</view>
				<view class="" v-else @click="isexpand=!isexpand">
					更多 <uni-icons color="#D1CDCD" size="16" type="down"></uni-icons>
				</view>
			</view>
		</view>
		<view class="k2">
			<view class="kflexl">
				<image src="/static/icon/wh.png" mode=""></image>
				你可能想知道
			</view>
			<view class="kflexr">
				<view class="">超时未取餐该怎么办？</view>
				<view class="icons" @click="$pageGo('/mypage/contactus/question')">更多帮助
					<uni-icons type="right" color="#29A85C" size="14"></uni-icons>
				</view>
			</view>
		</view>
		<view class="k34">
			<view class="">
				<view class="kflexl">
					<view class="kflexl">
						<image src="/static/icon/ql.png" mode=""></image>
						<view class="">
							福利群
						</view>
					</view>
					<view class="lyh">
						领优惠
					</view>
				</view>
				<view class="test">
					有问题，就找小薅，长按识别即可联系专属客服~
				</view>
			</view>
			<view class="rimg">
				<image show-menu-by-longpress :src="imgInfo.kfCode" mode=""></image>
			</view>
		</view>
		<view class="" style="height: 200rpx;"></view>
		<view class="footerbtn">
			<view class="cont">
				<view class="btn" @click="godetails">
					提交申请
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom" :safe-area="false">
			<view class="popup">
				<view class="title">
					选择退款原因
				</view>
				<scroll-view scroll-y="true" class="sc">
					<radio-group @change="radioChange">
						<label class="uni-list-cell" v-for="(item, index) in yylist" :key="item.value">
							<view style="font-size: 32rpx;">{{item.dictLabel}}</view>
							<view>
								<radio style="transform: scale(0.8);" color="#000" :value="item.value"
									:checked="index === current" />
							</view>
						</label>
					</radio-group>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		ordersInfo,
		getdict,
		ordersRefund,getimg
	} from '@/common/http.api.js';
	export default {
		data() {
			return {
				yylist: [],
				orderinfo: {},
				shopinfo: {},
				isexpand: false,


				params: {
					id: "",
					refundReason: "", //退款原因
					refundDescribe: "", //退款说明
				},
				imgInfo:{}
			};
		},
		onLoad(option) {
			getimg({}).then(res=>{
				this.imgInfo = res.data
			})
			this.params.id = option.id
			getdict('self_order_cancel_reason_customer').then(res => {
				this.yylist = res.data.map(item => {
					return {
						value: item.dictValue,
						dictLabel: item.dictLabel,
					}
				})
			})
			ordersInfo({
				id: option.id
			}).then(res => {
				res.data.productCategory = res.data.productCategory.split(',')
				this.orderinfo = res.data
				this.shopinfo = res.data.shop
			})
		},
		methods: {
			copy() {
				uni.setClipboardData({
					data: this.orderinfo.orderNumber,
					success() {
						uni.showToast({
							title: '复制成功',
							icon: 'success'
						})
					}
				})
			},
			//打开弹窗
			openPop() {
				this.$refs.popup.open()
			},
			radioChange(e) {
				this.params.refundReason = e.detail.value
				this.$refs.popup.close()
			},
			godetails() {
				if (this.params.refundReason == '') {
					uni.showToast({
						title: '请选择退款原因',
						icon: "none"
					})
					return
				}
				ordersRefund(this.params).then(res=>{
					if(res.code == 200){
						uni.showToast({
							title: '退款申请已提交',
							icon: "none"
						})
						setTimeout(()=>{
							uni.switchTab({
								url: '/pages/order/order'
							})
						},1000)
					}
				})
				console.log(this.params);
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #FBFBFB;
	}

	.top_ts {
		display: flex;
		align-items: center;
		margin: 20rpx auto;
		justify-content: center;

		image {
			margin-right: 10rpx;
			width: 31rpx;
			height: 31rpx;
		}

		font-family: PingFang SC,
		PingFang SC;
		font-weight: 500;
		font-size: 22rpx;
		color: #000000;
	}

	.top {
		background: #FFFFFF;
		padding: 20rpx;
		box-sizing: border-box;

		.juan {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #000000;
			margin-bottom: 32rpx;

			.flex_b {
				color: #D1CDCD;
			}
		}

		.textarea {
			width: 710rpx;
			height: 240rpx;
			background: #FBFBFB;
			font-size: 28rpx;
			padding: 10rpx;
			box-sizing: border-box;
		}
	}

	.content {
		margin-top: 20rpx;
		background: #fff;
		padding: 32rpx 20rpx;
		box-sizing: border-box;

		.iconflex {
			display: flex;
			align-items: center;
			justify-content: space-between;

			image {
				width: 32rpx;
				height: 33rpx;
			}

			.left {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 30rpx;
				color: #000000;
				display: flex;
				align-items: center;

				image {
					margin-right: 6rpx;
				}
			}

			.right {
				image {
					margin-left: 30rpx;
				}
			}
		}

		.its {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 30rpx auto;

			.its_l {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
			}

			.price1 {
				font-family: 'DINB';
				font-size: 28rpx;
				color: #000000;

				.s1 {
					font-family: 'FINE';
				}

				span {
					font-weight: 400;
					font-size: 24rpx;
					color: #D1CDCD;
					text-decoration: line-through;
					margin-right: 6rpx;
				}
			}

			.price2 {
				font-family: 'DINB';
				font-size: 28rpx;
				color: #CE7034;
			}

			.price3 {
				font-family: 'DINB';
				font-size: 40rpx;
				color: #000000;

				span {
					font-size: 28rpx;
				}
			}

			.btn {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #FFFFFF;
				height: 32rpx;
				background: #29A85C;
				text-align: center;
				line-height: 32rpx;
				padding: 0rpx 10rpx;
				margin-left: 10rpx;
			}
		}

		.check {
			text-align: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #D1CDCD;
			margin: 30rpx auto 0rpx;
		}

		.border {
			border-top: 1px solid #eee;
			border-bottom: 1px solid #eee;
		}
	}

	.k2 {
		width: 710rpx;
		height: 140rpx;
		background: #F3F3F3;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: 20rpx auto 0rpx;
		padding: 24rpx 20rpx;
		box-sizing: border-box;

		.kflexl {
			display: flex;
			align-items: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
			color: #000000;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 6rpx;
			}
		}

		.kflexr {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #979797;
			margin-top: 10rpx;

			.icons {
				display: flex;
				align-items: center;
				color: #29A85C;
			}
		}

	}

	.footerbtn {
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		border-top: 1px solid #eee;
		position: fixed;
		bottom: 0%;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.cont {
			display: flex;
			padding: 10rpx 20rpx;
			height: 120rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			align-items: center;
			justify-content: center;

			.btn {
				width: 670rpx;
				height: 100rpx;
				background: #000000;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				line-height: 100rpx;
				text-align: center;
				color: #fff;
			}
		}
	}

	.popup {
		width: 750rpx;
		height: 628rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		padding: 28rpx 20rpx;
		box-sizing: border-box;

		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #000000;
			text-align: center;
		}

		.uni-list-cell {
			display: flex;
			align-items: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #000000;
			justify-content: space-between;
			margin: 30rpx 0rpx;
		}

		.sc {
			height: 490rpx;
		}

		.ites {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #000000;
			margin: 30rpx auto;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
</style>